<template>
  <div class="button" @click="show">生成</div>

  <el-dialog
    v-if="visible"
    v-model="visible"
    width="900px"
    title="提示词生成"
    :close-on-click-modal="false"
    destroy-on-close
    append-to-body
  >
    <div class="dialog-body prompt">
      <div class="left">
        <div class="tips">提示词生成器使用配置的模型来优化提示词，以获得更高的质量和更好的结构。请写出清晰详细的说明。</div>
        <div class="try">试一试</div>
        <div class="command-item">
          <div @click="promptData.message = '你是一个写作大师，请用高超的写作技巧改进我的文章。'">润色文章</div>
          <div @click="promptData.message = '你是一个会议记录员，将会议内容提炼总结，包括讨论主题、关键要点和待办事项。'">会议助手</div>
          <div @click="promptData.message = '你是一个阅读理解大师，可以阅读用户提供的文章，并提炼主要内容输出给用户。'">内容提炼器</div>
        </div>
        <div class="message-box">
          <div style="margin: 15px 0 10px 0;">指令</div>
          <el-input v-model="promptData.message" type="textarea" :rows="8" />
        </div>
        <div class="button-box">
          <el-button type="primary" @click="createPrompt">生成</el-button>
        </div>
      </div>
      <div class="right">
        <div v-if="promptLoading" class="tips">
          <div><ac-icon iconId="018dcab3d3dfd6e82393" class="spinner" size="30"/> </div>
          <div>正在生成...</div>
        </div>
        <div v-else-if="!promptData.command" class="tips">
          <div><ac-icon iconId="018ece4f6d1864fd3dbe" size="60"/> </div>
          <div>在左侧描述您的需求，<br/>提示词将在此处显示。</div>
        </div>
        <el-input v-else v-model="promptData.command" type="textarea" :rows="16" />
      </div>
    </div>
    <template #footer>
      <el-button
        size="default"
        type="info"
        @click="visible=false"
      >取消</el-button>
      <el-button
        type="primary"
        size="default"
        @click="submit"
      >确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import api from "@/http/api";

const modelValue = defineModel();
const visible = ref(false);
const promptLoading = ref(false);
const promptData = ref({});

const show = () => {
  promptData.value = {};
  visible.value = true;
};

const createPrompt = () => {
  if (!promptData.value.message) {
    ElMessage.error("请输入指令");
    return;
  }

  promptLoading.value = true;
  api.post('/system/aiApplication/generatePrompt', {message: promptData.value.message}).then(res => {
    promptData.value.command = res.data || '';
    promptLoading.value = false;
  }).catch(() => {
    promptLoading.value = false;
  });
};

const submit = () => {
  modelValue.value = promptData.value.command || '';
  visible.value = false;
};
</script>

<style scoped>
.button {
  cursor: pointer;
  color: #2E70FF;
}
.dialog-body {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 150px);
  padding: 20px 0;
  .left {
    width: 40%;
    border-right: 1px solid #ccc;
    padding: 0 20px;
    overflow: auto;
  }
  .right {
    width: 60%;
    display: flex;
    padding-left: 20px;
    flex-direction: column;
    .message-box {
      flex-grow: 1;
      overflow: auto;
      padding-right: 20px;
      .chat-item {
        display: flex;
        flex-direction: row;
        margin-bottom: 20px;
        .avatar {
          img {
            width: 34px;
            height: 34px;
          }
        }
        .message {
          flex-grow: 1;
          .header {
            color: #a9afb7;
            display: flex;
            margin-bottom: 10px;
            .name {
              margin-right: 10px;
            }
          }
          .text {
            box-sizing: border-box;
            background-color: #f5f5f5;
            color: rgba(0, 0, 0, .9);
            border-radius: 5px;
            padding: 8px 12px;
            white-space: pre-wrap;
            word-break: break-all;
            font-size: 14px;
            line-height: 1.5;
          }
          .question-box {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            .question-item {
              margin-top: 10px;
              border-radius: 5px;
              padding: 10px 15px;
              background-color: #fff;
              cursor: pointer;
              border: 1px solid #f0f0f0;
              box-shadow: 0 2px 4px #e6e6e6;
            }
          }
        }
        .message.chat {
          flex-grow: 0;
        }
      }
      .chat-item.answer {
        .avatar {
          margin-right: 10px;
        }
        .header {
          justify-content: flex-start;
        }
        .body {
          display: flex;
          justify-content: flex-start;
        }
      }
      .chat-item.question {
        justify-content: flex-end;
        .avatar {
          margin-left: 10px;
        }
        .header {
          justify-content: flex-end;
        }
        .body {
          display: flex;
          justify-content: flex-end;
        }
      }
    }
    .input-box {
      margin-right: 20px;
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 8px 0;
      box-sizing: border-box;
      --el-border: none;
      --el-border-color: transparent;
      --el-border-color-hover: transparent;
      --el-input-focus-border-color: transparent;
      --el-input-hover-border-color: transparent;
      el-input {
        --el-input-focus-border-color: transparent;
        --el-input-hover-border-color: transparent;
        flex-grow: 1;
        box-shadow: none;
      }
      :deep(textarea) {
        resize: none;
      }
      :deep(.el-textarea__inner):focus {
        box-shadow: none;
      }
      :deep(.el-textarea__inner):hover {
        box-shadow: none;
      }
    }
  }
}
.dialog-body.prompt {
  padding: 0;
  height: unset;
  .left {
    width: 50%;
    .tips {
      text-indent: 28px;
      line-height: 1.5;
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px;
    }
    .try {
      margin-top: 10px;
      font-weight: 700;
    }
    .command-item {
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      > div {
        cursor: pointer;
        border: 1px solid #ccc;
        padding: 5px 10px;
        border-radius: 5px;
        margin-right: 8px;
      }
    }
    .button-box {
      margin-top: 10px;
      text-align: right;
    }
  }
  .right {
    width: 50%;
    padding: 0 20px;
    .tips {
      min-height: 300px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>